window.onload = init;

var map;// canvas
var ctxMap;// контекст canvas

var pl;// canvas
var ctxPl;// контекст canvas

var enemyCvs;// canvas
var ctxEnemy;// контекст canvas

var stats;// canvas
var ctxStats;// контекст canvas

var drawBtn;// кнопка
var clearBtn;// кнопка

var gameWidth = 800;
var gameHeight = 500;

var background = new Image();// фон
background.src = "img/bg.jpg";
var background1 = new Image();// для перемещения фона
background1.src = "img/bg.jpg";

var tiles = new Image();
tiles.src = "img/tiles.jpg";

var player;// canvas
var enemies = [];

var isPlaying;// флаг игра началась
var health;

var mapX = 0;
var map1X = gameWidth;

//for creaing enemies
var spawnInterval;
var spawnTime = 5000; // время, через которое враги будут появляться 
var spawnAmount = 3;// количество врагов

var requestAnimFrame = window.requestAnimationFrame || // unknown browser
  window.webkitRequestAnimationFrame || // chrome, yandex browser, safari
  window.mozRequestAnimationFrame || // ff
  window.oRequestAnimationFrame || // opera
  window.msRequestAnimationFrame; // ie

function init() {
  map = document.getElementById("map");
  ctxMap = map.getContext("2d");
  
  pl = document.getElementById("player");
  ctxPl = pl.getContext("2d");

  enemyCvs = document.getElementById("enemy");
  ctxEnemy = enemyCvs.getContext("2d");

  stats = document.getElementById("stats");
  ctxStats = stats.getContext("2d");

  map.width = gameWidth;
  map.height = gameHeight;
  pl.width = gameWidth;
  pl.height = gameHeight;
  enemyCvs.width = gameWidth;
  enemyCvs.height = gameHeight;
  stats.width = gameWidth;
  stats.height = gameHeight;
  
  ctxStats.fillStyle = "#303030";
  ctxStats.font = "bold 15pt Arial";
  
  //debugger ;

  drawBtn = document.getElementById("drawBtn");
  clearBtn = document.getElementById("clearBtn");
  
  drawBtn.addEventListener("click", drawRect, false);
  //drawRect.onclick = drawRect;
  clearBtn.addEventListener("click", clearRect, false);
  
  player = new Player();

  resetHealth();
  
  //drawBg();
  //draw();

  document.addEventListener("keydown", checkKeyDown, false);
  document.addEventListener("keyup", checkKeyUp, false);

  startLoop();
  updateStats();
}

function resetHealth()
{
  health = 100;
}

function spawnEnemy(count)
{
  for (var i = 0; i < count; i++)
  {
    enemies[i] = new Enemy();
  }
}

function startCreatingEnemies()
{
  stopCreatingEnemies();
  spawnInterval = setInterval(function(){spawnEnemy(spawnAmount)}, spawnTime);
}

function stopCreatingEnemies()
{
  clearInterval(spawnInterval);
}

function loop()
{
  if (isPlaying)
  {
    draw();
    update();
    requestAnimFrame(loop);
  }
}

function startLoop()
{
  isPlaying = true;
  loop();
  startCreatingEnemies();
}

function stopLoop()
{
  isPlaying = false;
}

function draw() {
  player.draw();

  clearCtxEnemy();
  for(var i = 0; i < enemies.length; i++)
  {
    enemies[i].draw();
  }
}

function update()
{
  moveBg();
  drawBg();
  updateStats();
  //console.log("loop");
  player.update();

  for(var i = 0; i < enemies.length; i++)
  {
    enemies[i].update();
  }
}

function moveBg()
{
  var vel = 4;
  mapX -= 4;
  map1X -= 4;

  if ((mapX + gameWidth) < 0) mapX = gameWidth-5;
  if ((map1X + gameWidth) < 0) map1X = gameWidth-5;

}

// Objects
function Player() {
  this.srcX = 0;
  this.srcY = 0;
  this.drawX = 0;
  this.drawY = 0;
  this.width = 60;//120;
  this.height = 60;//70;
  
  this.speed = 5;
  
  // for keys
  this.isUp = false;
  this.isDown = false;
  this.isRight = false;
  this.isLeft = false;
}

function Enemy() {
  this.srcX = 0;
  this.srcY = 65;
  this.drawX = Math.floor(Math.random() * gameWidth) + gameWidth;
  this.drawY = Math.floor(Math.random() * gameHeight);
  this.width = 60;
  this.height = 60;
  
  this.speed = 8;
}

Enemy.prototype.draw = function() {
  ctxEnemy.drawImage(
    tiles,
    this.srcX, this.srcY, this.width, this.height, // размер картики
    this.drawX, this.drawY, this.width, this.height); // размер экрана
}

Enemy.prototype.update = function() {
    this.drawX -= 7;
    if(this.drawX + this.width < 0)
    {
/*
      this.drawX = Math.floor(Math.random() * gameWidth) + gameWidth;
      this.drawY = Math.floor(Math.random() * gameHeight);
*/
      this.destroy();
    }
}

Enemy.prototype.destroy = function()
{
  enemies.splice(enemies.indexOf(this), 1);
}

Player.prototype.draw = function() {
  clearCtxPlayer();
  ctxPl.drawImage(
    tiles,
    this.srcX, this.srcY, this.width, this.height, // размер картики
    this.drawX, this.drawY, this.width, this.height); // размер экрана
}

Player.prototype.update = function() {
  if(health < 0) resetHealth();

	if(this.drawX < 0) this.drawX = 0;
	if(this.drawX > gameWidth - this.width) this.drawX = gameWidth - this.width;
	if(this.drawY < 0) this.drawY = 0;
	if(this.drawY > gameHeight - this.height) this.drawY = gameHeight  - this.height;
  
  for(var i = 0; i < enemies.length; i++)
  {
    if (
      this.drawX >= enemies[i].drawX &&
      this.drawY >= enemies[i].drawY &&
      (this.drawX <= enemies[i].drawX + enemies[i].width) &&
      (this.drawY <= enemies[i].drawY + enemies[i].height)
      )
    {
      health -= 1;
    }
  }
  
  this.chooseDir();
}

Player.prototype.chooseDir = function() {
	if(this.isUp)
    this.drawY -= this.speed;
	if(this.isDown)
    this.drawY += this.speed;
	if(this.isRight)
    this.drawX += this.speed;
	if(this.isLeft)
    this.drawX -= this.speed;
}

function checkKeyDown(e) {
  var keyID = e.keyCode || e.which;
  var keyChar = String.fromCharCode(keyID);
  
  if(keyChar == "W") {
    player.isUp = true;
    e.preventDefault();
  }
  if(keyChar == "S") {
    player.isDown = true;
    e.preventDefault();
  }
  if(keyChar == "D") {
    player.isRight = true;
    e.preventDefault();
  }
  if(keyChar == "A") {
    player.isLeft = true;
    e.preventDefault();
  }
}

function checkKeyUp(e) {
  var keyID = e.keyCode || e.which;
  var keyChar = String.fromCharCode(keyID);
  
  if(keyChar == "W") {
    player.isUp = false;
    e.preventDefault();
  }
  if(keyChar == "S") {
    player.isDown = false;
    e.preventDefault();
  }
  if(keyChar == "D") {
    player.isRight = false;
    e.preventDefault();
  }
  if(keyChar == "A") {
    player.isLeft = false;
    e.preventDefault();
  }
}

function drawRect() {
  ctxMap.fillStyle = "#3D3D3D";
  ctxMap.fillRect(10, 10, 100, 100);
}

function clearRect() {
  ctxMap.clearRect(0, 0, 800, 500);
}

function clearCtxPlayer() {
  ctxPl.clearRect(0, 0, gameWidth, gameHeight);
}

function clearCtxEnemy() {
  ctxEnemy.clearRect(0, 0, gameWidth, gameHeight);
}

function updateStats()
{
  ctxStats.clearRect(0, 0, gameWidth, gameHeight);
  ctxStats.fillText("Health: " + health, 10, 20);
}

function drawBg() {
  ctxMap.clearRect(0, 0, gameWidth, gameHeight);
  ctxMap.drawImage(
    background,
    0, 0, 800, 480, // размер картики
    mapX, 0, gameWidth, gameHeight); // размер экрана
  ctxMap.drawImage(
    background1,
    0, 0, 800, 480, // размер картики
    map1X, 0, gameWidth, gameHeight); // размер экрана
}
